<template>
	<view class="shop-qrcode">
		<cu-custom bgColor="bg-gradual-orange" :isBack="true">
			<block slot="content">商家收款码</block>
		</cu-custom>
		
		<view class="warp">
			<image class="qrcode" :src="qrcode" mode="widthFix" @tap="ViewImage" @longtap="save"></image>
			<view class="tips">
				请使用微信扫描付款
			</view>
			<view class="tips">
				长按保存二维码
			</view>
		</view>
		
		<view class="padding flex flex-direction">
			<button class="cu-btn bg-gradual-orange margin-tb-sm lg" @tap="empower">{{btn_text}}</button>
		</view>
	</view>

</template>

<script>
	import {save} from '@/common/upload.js'
	import shop from '@/api/shop.js';
	import MyShops from '@/components/MyShops';
	export default {
		data() {
			return {
				qrcode: '',
				btn_text: '支付宝授权',
				aliAuthCodeUrl: ''
			}
		},
		components: {
			MyShops,
		},
		created() {
			this.loadData()
		},
		methods: {
			loadData() {
				shop.shopQrcode().then(res => {
					if (res.code === 1) {
						this.qrcode = res.data.bgQrcode;
						this.shopUser();
					} else {
						// this.toast(res.msg);
						uni.showModal({
							title: '提示',
							content: '您还未绑定收款二维码，请联系您的专属服务人员或拨打平台服务热线4009916595',
							success: function (res) {
							  uni.navigateBack();
							}
						});
					}
				})
			},
			async save() {
				if (!this.qrcode) {
					this.toast('保存失败，暂无付款码');
					return;
				}
				save(this.qrcode);
			},
			ViewImage(e) {
				const imgList = [this.qrcode]
				uni.previewImage({
					urls: imgList,
					current: 0
				});
			},
			shopUser() {
				shop.shopAli().then(res => {
					if (res.code === 1) {
						this.aliAuthCodeUrl = res.data.url;
						if (res.data.aliuser) {
							this.btn_text = '支付宝重新授权';
						}
					}
				})
			},
			empower() {
				if (this.aliAuthCodeUrl) {
					this.jumpTo(this.aliAuthCodeUrl, 'web')
				} else {
					this.toast('数据传输失败，无法跳转');
					return;
				}
			}
		}
	}
</script>

<style lang="less">
	page {
		height: 100%;
		overflow: hidden;
	}
	.shop-qrcode {
		height: 100%;
		background-color: #FFE3BC;
		.warp {
			margin: 10px;
			padding: 20px;
			background-color: #FFFFFF;
			text-align: center;
			border-radius: 5px;

			.tips {
				font-size: 12px;
				color: #AAAAAA;
				line-height: 20px;
			}
		}
	}
</style>
